<div class="overflow-hidden content-margin content-padding" style="width: 50%;">

    <form [formGroup]="formGroup1">

        <dynamic-basic-form-control *ngFor="let controlModel of formModel1" class="form-row"
                                    [group]="formGroup1"
                                    [model]="controlModel"
                                    (blur)="onBlur($event)"
                                    (change)="onChange($event)"
                                    (focus)="onFocus($event)"></dynamic-basic-form-control>
    </form>

    <pre>{{formGroup1.value | json}}</pre>


    <form [formGroup]="formGroup2">

        <dynamic-basic-form-control *ngFor="let controlModel of formModel2" class="form-row"
                                    [group]="formGroup2"
                                    [model]="controlModel"
                                    (blur)="onBlur($event)"
                                    (change)="onChange($event)"
                                    (focus)="onFocus($event)">

            <ng-template modelId="basicFormArray" let-index="index">

                <button type="button" (click)="remove(index)">Remove Item</button>

            </ng-template>

        </dynamic-basic-form-control>

        <button type="button" (click)="add()">Add Item</button>
        <button type="button" (click)="clear()">Remove All</button>

    </form>

    <pre>{{formGroup2.value | json}}</pre>

</div>